
import React from 'react';
import { Radio, Button, Spin, message } from 'antd';
import { WeaInput, WeaLocaleProvider, WeaTableEditable,WeaSelect,WeaError,WeaDialog,WeaFormItem } from 'ecCom';
import { observer, inject } from 'mobx-react';
import { toJS } from 'mobx';
import './index.less';
import FileUploadSetDialog from '../relation/FileUploadSetDialog';
import '../relation/index.less'
const getLabel = WeaLocaleProvider.getLabel;

@inject("edcExcelJoinCubeStore")
@observer
export default class JoinCube extends React.Component {
    constructor(props) {
        super(props);
        this.store = props.edcExcelJoinCubeStore;
		this.store.init(props.app);
    }

    render() {
        const { selectTab,tabs,datas,changTab,changeDatas,changeRow,changeMode,newCubeMode,triggerFileSetting,changeNodes,getModeOptions,getNodeOptions,save,saveLoading, 
            createModeVisible,hideCreateMode,cubeAppId,cubeAppName,cubeModeName,changeCubeAppName,changeCubeModeName,createLoading,createMode,
            fileVisible,categoryInfo,hideFileSetting
        } = this.store;
        return(
            <div className="edc-excel-joinCube">
                <div className="excelTab">
                    <Radio.Group ecId={`${this && this.props && this.props.ecId || ''}_undefined@bacu9e`} value={selectTab} onChange={changTab} >
                        {tabs.map(tab=><Radio.Button ecId={`${this && this.props && this.props.ecId || ''}_undefined@rsqqx5@${tab.id}`} value={tab.id}>{tab.name}</Radio.Button>)}
                    </Radio.Group>
                </div>
                <div className="cusTable">
                    <WeaTableEditable ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEditable@twpyll`}
                        columns={[{
                            title: getLabel('527443','表单名称') ,
                            dataIndex: "sheetName",
                            width: "20%",
                            com: [{ type: "INPUT", key: 'sheetName',viewAttr:1 }]
                        },{
                            title: getLabel('527444','是否启用') ,
                            dataIndex: "isUsed",
                            width: "10%",
                            com: [{ type: "SWITCH", key: "isUsed" }]
                        },{
                            title: getLabel('527445','关联建模模块') ,
                            dataIndex: "formmodeId",
                            width: "25%",
                            com: [{
                                type: "CUSTOM",
                                key: "formmodeId",
                                render: (text, record, index, onEdit) => {
                                    const {id,isUsed,formmodeId} = record;
                                    const modeOptions = record.options
                                    return <div style={{display: 'flex'}}>
                                        {isUsed==='1' && 
                                            <WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@pfrmq9@${index}`} tipPosition='top' ref={r=>this.store[`modeError${id}`]=r} error={getLabel('527446','关联建模为空') }>
                                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@e9gbtq@${index}`} 
                                                style={{maxWidth:'200px'}}
                                                options={modeOptions}
                                                value={formmodeId}
                                                onChange={(v)=>changeMode(v,record)}
                                                disabled={modeOptions.length===0}
                                                viewAttr = {modeOptions.length>0 && 3}
                                                placeholder={modeOptions.length===0 && getLabel('511780', '表单未创建模块')}
                                            />
                                        </WeaError>}
                                        {isUsed==='1' && modeOptions.length===0 && <a style={{width:'70px',marginTop:'11px'}} onClick={()=>newCubeMode(record)}>{getLabel('527450','立即创建')}</a>}
                                    </div>
                                }
                              }]
                        },{
                            title: getLabel('527447','附件上传目录') ,
                            dataIndex: "file",
                            width: "10%",
                            com: [{
                                  type: "CUSTOM",
                                  key: "file",
                                  render: (text, record, index, onEdit) => {
                                    const {isUsed,formmodeId,isSetCategory} = record;
                                    return <div className="file-icon">
                                        {isUsed==='1' && formmodeId && <i className="icon-coms-Flow-setting" onClick={()=>triggerFileSetting(record)} />}
                                        {isUsed==='1' && isSetCategory && <span className="icon-coms-Selected icon-coms-Flow-Selected-fileipload" style={{marginRight:'-20px'}} />}
                                    </div>
                                  }
                                }]
                        },{
                            title: getLabel('527448','填报节点') ,
                            dataIndex: "nodes",
                            width: "25%",
                            com: [{
                                type: "CUSTOM",
                                key: "nodes",
                                render: (text, record, index, onEdit) => {
                                    const {id,isUsed,formmodeId,nodes} = record;
                                    const nodeOptions = getNodeOptions(record);
                                    if(nodeOptions.length===0){
                                        return isUsed==='1' && formmodeId && 
                                            <WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@juq140@${index}`} tipPosition='top' ref={r=>this.store[`nodesError${id}`]=r} error={getLabel('527453','填报节点为空')}>
                                            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@5pnj0g@${index}`} disabled placeholder={getLabel('527452','无节点可选择') } viewAttr = {3} />
                                        </WeaError>
                                    }
                                    return <div style={{display: 'flex'}}>
                                        {isUsed==='1' && formmodeId && 
                                            <WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@bylh4x@${index}`} tipPosition='top' ref={r=>this.store[`nodesError${id}`]=r} error={getLabel('527453','填报节点为空')}>
                                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@1ehvfk@${index}`} 
                                                    //showSearch
                                                    //optionFilterProp="children"
                                                    multiple
                                                    style={{maxWidth:'200px'}}
                                                    value = {nodes}
                                                    options={nodeOptions}
                                                    onChange={(v)=>changeNodes(v,record)}
                                                    viewAttr = {3}
                                                />
                                            </WeaError>
                                        }
                                    </div>
                                }
                              }]
                        },{
                            title:getLabel('528333','相关操作') ,
                            dataIndex: "customrender",
                            width: "10%",
                            com: [
                                {
                                  type: "CUSTOM",
                                  key: "customrender",
                                  render: (text, record, index, onEdit) => {
                                    const { isUsed,formmodeId,fromWhere } = record;
                                    return <div className="operat-icon">
                                        {
                                            fromWhere ? <i className="icon-coms-Delete" onClick={()=>changeRow(record)} /> : <i className="icon-coms-Enlarge" onClick={()=>changeRow(record)}/>
                                        }
                                    </div>
                                  }
                                }
                            ]
                        }
                        ]}
                        showTitle={false}
                        datas={toJS(datas)}
                        onChange={changeDatas}
                        getRowSelection={()=>false}
                    />
                </div>
                <div className='saveBtn'>
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@hqld3t`} type="primary" onClick={save}  loading={saveLoading}>{getLabel('527451','保存')}</Button>
                </div>

                {fileVisible && <FileUploadSetDialog ecId={`${this && this.props && this.props.ecId || ''}_FileUploadSetDialog@fk9zfl`}    //移动建模整理的弹框页面,默认是打开的
                    categoryInfo={categoryInfo} 
                    store={this.store}
                    onFileCancel={hideFileSetting}
                />}

                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@k98qxt`}
                    icon={"icon-coms02-Data-center"}
                    iconBgcolor="#1a57a0"
                    title={getLabel('127492', '添加模块')}
                    visible={createModeVisible}
                    onCancel={hideCreateMode}
                    style={{ height: '120px', width: '380px' }}
                    buttons={[
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@festfq@`} type="primary" loading={createLoading} onClick={createMode}>{getLabel('125', '创建')}</Button>,
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@vqwy1c@`} type="primary" onClick={hideCreateMode} >{getLabel('31129', '取消')}</Button>,
                    ]}
                >
                    <div style={{padding:'25px'}} >
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@56jsg8`}
                            label={getLabel('381923', '应用名称')}
                            labelCol={{ span: '6' }}
                            wrapperCol={{ span: '18' }}
                        >
                            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@o5vbf3`} value={cubeAppName}  disabled={cubeAppId&&cubeAppId!==''&&cubeAppName!==''} onChange={changeCubeAppName} viewAttr={3} />
                        </WeaFormItem>
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@4mqktu`}
                            style={{marginTop:'10px'}}
                            label={getLabel('28485', '模块名称')}
                            labelCol={{ span: '6' }}
                            wrapperCol={{ span: '18' }}
                        >
                            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@e6w5ss`} value={cubeModeName} onChange={changeCubeModeName} viewAttr={3}/>
                        </WeaFormItem>
                    </div>
                </WeaDialog>

            </div>
        );
    }

}